<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        
        .warp {
            width: 300px;
            margin: auto;
            margin-top: 100px;
        } 
        ul::after {
            clear: both;
            content: "";
            display: table;
        }
        
        ul li {
            float: left;
            padding: 5px;
            margin-right: 20px;
            cursor: pointer;
        }
        
        ul li:last-child {
            margin-right: 0;
        }
        
        ul li.active {
            border-bottom: 3px solid #F40;
            color: #F40;
        }
        .box{ 
            margin-top: 20px;
            display: none;
        }
        .box::after{
            clear: both;
            content: "";
            display: table;
        }
        .box.active{
            display: block;
        }
        .box a{
            font-size: 14px;
            display: block;
            float: left;
            width: 50%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            margin-bottom: 10px; 
            color: black;
        }
        .box .h{
            color: #ff5000
        }
        .box a:hover{
            color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="warp">
        <ul>
            <li class="active">公告</li>
            <li>规则</li>
            <li>论坛</li>
            <li>安全</li>
            <li>公益</li>
        </ul>
        <div class="box active">
            <a href="" class="h">天猫618展现爆发力 </a>
            <a href="" class="h">牢牢占据品牌增长主场</a>
            <a href="">天猫618带品牌集体爆发</a>
            <a href=""> 双11量级的天猫618</a>
        </div>
        <div class="box">
            <a href="">新增《淘宝网汽配行业管理规范》</a>
            <a href="">公示通知《淘宝网区域零售服务说明》</a>
            <a href="">变更公示通知《淘宝网票务行业管理规范》</a>
            <a href="">变更公示通知《淘宝网数字娱乐市场须提供官方授权</a>
        </div>
        <div class="box">
            <a href="" class="h">淘宝1212活动招商</a>
            <a href="">中差评功能升级</a>
            <a href="">陌生人拼团上线</a>
            <a href="">运营神器年中大促</a>
        </div>
        <div class="box">
            <a href="" class="h">魔豆妈妈公益项目</a>
            <a href="" class="h">让母爱永不打烊！</a>
            <a href="">卖家注意：风险通报！</a>
            <a href="">售假获刑又起诉！</a>
        </div>
        <div class="box">
            <a href="" class="h">淘宝公益平台正式更名</a>
            <a href="" class="h">益起来商家招募即将截</a>
            <a href="">卖家如何设置公益宝贝</a>
            <a href="">公益机构开店全攻略</a>
        </div>
    </div>
    <script>
        var li=document.querySelectorAll("ul li")
        var box=document.querySelectorAll(".box")
        console.log(box)
        console.log(li)
        for(var i=0;i<li.length;i++){
            li[i].index=i
            li[i].addEventListener('mouseover',function(){
                for(var k=0;k<li.length;k++){
                    li[k].classList.remove("active")
                }
                this.classList.add("active")
                console.log(this.index)
                for(var j=0;j<box.length;j++){
                    box[j].classList.remove("active")
                }
                box[this.index].classList.add("active")
            })
        }
    </script>
</body>

</html>